<template>
	<view class="container" @click="gotoTop"
		:style="`bottom: ${bottom}px; right: ${right}px; visibility: ${isShow ? 'visible':'hidden'}; opacity: ${isShow ? 1:0};`">
		{{text}}
	</view>
</template>

<script>
	export default {
		name: "to-top",
		props: {
			text: {
				typeof: 'string',
				default: "置顶"
			},
			bottom: {
				typeof: 'int',
				default: 40
			},
			right: {
				typeof: 'int',
				default: 20
			},
			isShow: {
				typeof: 'boolean',
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			gotoTop: () => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		z-index: 1;
		position: fixed;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 100%;
		background-color: #eeeeeed0;
		backdrop-filter: blur(2px);
		color: #333;
		font-size: 14px;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.25);
		transition: all 0.24s;
	}
</style>